<template>
  <div class="login">
    <el-row>
      <el-col :lg="8" :md="12" :xs="20" :sm="20">
        <transition name="fade" mode="out-in">
          <!-- 登录 -->
          <div class="login-box" v-if="!showRegister" key="login">
            <h2>SHIROBYJWT</h2>
            <el-form size="medium" class="login-form">
              <el-form-item>
                <el-input type="text" placeholder="账号" v-model="username">
                  <i slot="prefix" class="el-input__icon el-icon-user"></i>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input type="password" placeholder="密码" v-model="password">
                  <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input
                  type="text"
                  placeholder="验证码"
                  v-model="captchaCode"
                >
                  <i slot="prefix" class="el-input__icon el-icon-check"></i>
                  <img
                    class="captcha"
                    @click="getCaptcha"
                    id="captcha"
                    slot="append"
                  />
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  style="width: 30%"
                  @click="login"
                  round
                  >登录</el-button
                >
                <el-button
                  type="default"
                  style="width: 30%"
                  round
                  @click="showRegister = true"
                  >注册</el-button
                >
              </el-form-item>
              <el-form-item style="text-align: right">
                <!-- <el-link style="margin-right:10px">邮箱验证码登录 </el-link> -->
                <el-link @click="forgetPassword">忘记密码？</el-link>
              </el-form-item>
            </el-form>
          </div>
          <!-- 注册 -->
          <div class="login-box" v-if="showRegister" key="register">
            <h2>SHIROBYJWT</h2>
            <el-form size="medium" class="login-form">
              <el-form-item>
                <el-input
                  type="text"
                  placeholder="账号(英文数字组成、长度大于4 不超过20)"
                  v-model="register.username"
                  @input="checkUsername"
                  maxlength="15"
                >
                  <i slot="prefix" class="el-input__icon el-icon-user"></i>
                  <i
                    slot="suffix"
                    style="color: #f56c6c"
                    class="el-input__icon el-icon-circle-close"
                    v-show="isVaildUsername != null && !isVaildUsername"
                  ></i>
                  <i
                    slot="suffix"
                    style="color: #67c23a"
                    class="el-input__icon el-icon-circle-check"
                    v-show="isVaildUsername != null && isVaildUsername"
                  ></i>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input
                  type="password"
                  placeholder="密码(必须包含英文和数字 6-20)"
                  v-model="register.password"
                  @input="checkPassword"
                >
                  <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                  <i
                    slot="suffix"
                    style="color: #f56c6c"
                    class="el-input__icon el-icon-circle-close"
                    v-show="isVaildPassword != null && !isVaildPassword"
                  ></i>
                  <i
                    slot="suffix"
                    style="color: #67c23a"
                    class="el-input__icon el-icon-circle-check"
                    v-show="isVaildPassword != null && isVaildPassword"
                  ></i>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input
                  type="password"
                  placeholder="确认密码"
                  v-model="compirePassword"
                >
                  <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                  <i
                    slot="suffix"
                    style="color: #f56c6c"
                    class="el-input__icon el-icon-circle-close"
                    v-show="
                      register.password != compirePassword &&
                      register.password != null &&
                      register.password != ''
                    "
                  ></i>
                  <i
                    slot="suffix"
                    style="color: #67c23a"
                    class="el-input__icon el-icon-circle-check"
                    v-show="
                      register.password == compirePassword &&
                      register.password != null &&
                      register.password != ''
                    "
                  ></i>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input
                  type="email"
                  placeholder="邮箱"
                  v-model="register.enableMail"
                  @input="checkMail"
                >
                  <i slot="prefix" class="el-input__icon el-icon-message"></i>
                  <i
                    slot="suffix"
                    style="color: #f56c6c"
                    class="el-input__icon el-icon-circle-close"
                    v-show="isVaildEmail != null && !isVaildEmail"
                  ></i>
                  <i
                    slot="suffix"
                    style="color: #67c23a"
                    class="el-input__icon el-icon-circle-check"
                    v-show="isVaildEmail != null && isVaildEmail"
                  ></i>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  style="width: 30%"
                  @click="subRegister"
                  round
                  >注册</el-button
                >
                <el-button
                  type="default"
                  style="width: 30%"
                  round
                  @click="showRegister = false"
                  >返回</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </transition>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as api from "@/js/api";
import * as util from "@/js/util";
export default {
  name: "Login",
  data() {
    return {
      username: "", //登录用户
      password: "", //登录密码
      showRegister: false, //显示注册
      register: {}, //注册表单
      compirePassword: "", //确认密码
      isVaildEmail: null,
      isVaildPassword: null,
      isVaildUsername: null,
      captchaCode: null,
      verKey: null,
    };
  },
  methods: {
    forgetPassword() {
      this.$confirm("此操作将给您的注册邮箱发送找回链接, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if(this.username==""){
            this.$message({
              type: 'warning',
              message: '请输入用户名后找回'
            })
            return;
          }
          api.forgetPassword({username:this.username}).then(res => {
            this.$message({
              type:res.status?'success':'error',
              message: res.message
            })
          })
        })
        .catch(() => {});
    },
    /**
     * 获取验证码
     */
    getCaptcha() {
      api.getCaptcha().then((res) => {
        this.verKey = res.data.key;
        document.getElementById("captcha").src = res.data.image;
      });
    },
    subRegister() {
      let result = util.checkRegister(this.register, this.compirePassword);
      if (!result.status) {
        this.$message({
          type: "warning",
          message: result.message,
        });
      } else {
        api.register(this.register).then((res) => {
          console.log(res);
          this.$alert(res.message, "提示信息", {
            confirmButtonText: "确定",
            callback: {},
          });
        });
      }
    },
    /**
     * 校验用户名
     */
    checkUsername() {
      this.isVaildUsername = util.checkUsername(this.register.username);
    },
    /**
     * 校验密码
     */
    checkPassword() {
      this.isVaildPassword = util.checkPassword(this.register.password);
    },
    /**
     * 校验邮箱
     */
    checkMail() {
      this.isVaildEmail = util.checkEmail(this.register.enableMail);
    },
    /**
     * 登录方法
     */
    login() {
      if (!util.checkLogin(this.username, this.password).status) {
        this.$message({
          type: "warning",
          message: util.checkLogin(this.username, this.password).message,
        });
        return;
      }
      let param = new FormData();
      param.append("username", this.username);
      param.append("password", this.password);
      param.append("verKey", this.verKey);
      param.append("verCode", this.captchaCode);
      // param.append("captchaCode", this.captchaCode);
      api.login(param).then((res) => {
        console.log(res);
        if (!res.data.status) {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        } else {
          sessionStorage.setItem("token", res.data.data);
          this.$router.push("/");
        }
      });
    },
  },
  mounted() {
    this.getCaptcha();
  },
};
</script>
<style scoped>
.login {
  width: 100%;
  height: 100%;
  background-color: #303133;
  /* background-attachment: fixed; */
}
h2 {
  color: #303133;
}
.login-box {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
}
</style>
<style>
.login .el-row,
.el-col {
  height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.login-form {
  margin: 40px;
}
.fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.fade-enter, .fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateY(-40px);
  opacity: 0;
}
.captcha {
  height: 32px;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.login .el-input-group__append,
.el-input-group__prepend {
  padding: 0;
  border: none;
  align-items: center;
}
</style>